const { name } = require("file-loader");
const { options, watch } = require("less");
const { type } = require("os");
const path = require("path");
const { plugin } = require("postcss");
const { DefinePlugin, Template } = require("webpack");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const  HtmlWebpackPlugin  = require("html-webpack-plugin");
// const { DefinePlugin } = require("webpack");
const { title } = require("process");
const { VueLoaderPlugin } = require ("vue-loader/dist/index");
const { gzip } = require("zlib");
// const  CopyWebpackPlugin  = require("copy-webpack-plugin");
module.exports = {

    target:"web",
    mode:"development",
    devtool:"source-map",
    entry:"./src/main.js",
    output:{
        path:path.resolve(__dirname,"./build"),
        filename:"bundle.js"
    },
    devServer :{

        //当不能在内存中获取指定资源，从contentBase指定的路径中访问
       // contentBase:"./public",
        //模块热替换 与 targer:"web" 同时打开
        hot:true,
        //host:"0.0.0.0",
       // port:3311,
        open:true,
       // compress:true
        proxy:[
            {
                context: ['/api'],
                target: 'http://localhost:8088',
                 pathRewrite: {
                              '^/proxy': ''
                        },
                secure: false,
                changeOrigin:true
              },
        ]
        
        
    },
    resolve:{
     extensions:[".js",".vue",".json",".ts",".mjs",".jsx",".tsx"]
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    "style-loader",
                    "css-loader",
                    "postcss-loader"
                    
                ]
            },
            {
                test:/\.less$/,
                use:[
                    "style-loader",
                    "css-loader",
                    "less-loader"
                ]
            },
            // {
            //     test:/\.(jpg|jpe?g|png|svg|gif)$/,
            //     use:"file-loader",
            //     options:{ 
            //         outputPath:"img",
            //         name:"font/[name]_[hash:6].[ext]"
            //     }
            // },
            // {
            //     test:/\.(jpg|jpe?g|png|svg|gif)$/,
            //     use:"url-loader",
            //     options:{ 
            //       //  outputPath:"img",
            //         name:"font/[name]_[hash:6].[ext]",
            //         limit: 100 * 1024
            //     }
            // },
                  // },
            {
                test:/\.(jpg|jpe?g|png|svg|gif)$/,
                type: "asset",
                generator:{
                 filename:"img/[name]_[hash:6][ext]"
                },
                parser:{
                    dataUrlCondition:{
                        maxSize:100*1024
                    }
                }
            },
            {
                test:/\.(eot|ttf|woff2?)$/,
                use:{
                    loader:"file_loader",
                    options:{
                     name:"font/[name]_[hash:6].[ext]"
                    }
                }
            },
            {
                test:/\.js$/,
                use:"babel-loader"
            },
            {
                test:/\.vue$/,
                use:"vue-loader"
            }
        ]

    },
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template :"./public/index.html",
            title:"标题"
        }),
        new DefinePlugin({
            BASE_URL:"'./'",
            __VUE_OPTIONS_API__:true,
            __VUE_PROD_DEVTOOLS__:false
        }),
        new VueLoaderPlugin()

        /*  文件拷贝 */
        // new CopyWebpackPlugin({
        //     patterns:[
        //         {
        //             form:"public",
        //             to:"./",
        //             globOptions:{
        //                 ignore:[
        //                     "**/index.html"
        //                 ]
        //             }
        //         }
        //     ]
        // })
    ]
}
